/* 饼图组件对象  */
var H5ComponentPie = function (name, cfg) {

    var component = new H5ComponentBase(name, cfg);

    var w = cfg.width;
    var h = cfg.height;

    //加入画布 （网络线背景）
    var cns = document.createElement('canvas');
    var ctx = cns.getContext('2d');
    cns.width = ctx.width = w;
    cns.height = ctx.height = h;
    $(cns).css('zIndex',1)
    component.append(cns);

    var  r = w/2;

    // 加入一个底图层
    ctx.beginPath();
    ctx.fillStyle='#eee';
    ctx.strokeStyle='#eee';
    ctx.lineWidth = 1;
    ctx.arc(r,r,r-3,0,2*Math.PI);
    ctx.fill();
    ctx.stroke();

    //绘制一个数据层
    var cns = document.createElement('canvas');
    var ctx = cns.getContext('2d');
    cns.width = ctx.width = w;
    cns.height = ctx.height = h;
    $(cns).css('zIndex',2)
    component.append(cns);

    var colors= ['skyblue','green','red','purple','orange','deeppink','gray'];  //备用颜色
    var sAngel = 1.5 * Math.PI;        // 设置开始的角度在12点位置
    var eAngel = 0;       //结束角度
    var aAngel = Math.PI * 2        //100%的圆结束的角度 2pi = 360


    var step = cfg.data.length;
    for(var i =0; i<step; i++){
        var item = cfg.data[i];
        var color = item[2] || (item[2]=colors.pop());

        var eAngel = sAngel + aAngel * item[1];

        ctx.beginPath();
        ctx.fillStyle=color;
        ctx.strokeStyle=color;
        ctx.lineWidth = 0.1;
        ctx.moveTo(r, r)
        ctx.arc(r,r,r-3,sAngel,eAngel);
        ctx.fill();
        ctx.stroke();

        var sAngel = eAngel;

        //加入所有的项目文本以及百分比
        var text = $('<div class="text">');
        text.text(cfg.data[i][0]);
        var rate = $('<div class="rate">');
        rate.text( cfg.data[i][1]*100+'%');
        text.append(rate);
        text.css('transition','all 0.5s '+i*0.1+'s');

        var x = r + Math.sin(0.68*Math.PI-sAngel) * r;
        var y = r + Math.cos(0.68*Math.PI-sAngel) * r;

        if (x > w/2){
            text.css('left',x/2);
        }else{
            text.css('right' ,(w-x)/2);
        }

        if(y > h/2){
            text.css('top',y/2);
        }else{
            text.css('bottom',(h-y)/2+10);
        }

        if (cfg.data[i][2]){
            text.css('color',cfg.data[i][2]);
        }

        text.css('opacity',0);
        component.append(text);
    }

    //加入蒙板层
    var cns = document.createElement('canvas');
    var ctx = cns.getContext('2d');
    cns.width = ctx.width = w;
    cns.height = ctx.height = h;
    $(cns).css('zIndex',3)
    component.append(cns);

    ctx.fillStyle='#eee';
    ctx.strokeStyle='#eee';
    ctx.lineWidth = 1;


    //生长动画
    var draw = function ( per ) { // 把绘制雷达和阴影外增加draw函数，通过settimeout达到动画效果
        ctx.clearRect(0,0,w,h);
        ctx.beginPath();
        ctx.moveTo(r,r);

        if(per<=0){
            ctx.arc(r,r, r-2,0,2*Math.PI);
            component.find('.text').css('opacity',0);
        }else {
            ctx.arc(r,r,r-2,sAngel,sAngel+2*Math.PI*per,true);
        }

        ctx.fill();
        ctx.stroke();

        if (per>=1){
            component.find('.text').css('transition','all 0s');
            // H5ComponentPie.reSort(component.find('.text'));
            component.find('.text').css('transition','all 1s');
            component.find('.text').css('opacity',1);
            ctx.clearRect(0,0,w,h);
        }
    }

    draw(0);

    component.on('onLoad', function () {
        // 饼图生长动画
        var s = 0;
        for(var i=0;i<100;i++){
            setTimeout(function () {
                s+=0.01;
                draw(s);
            },i*10+500)
        }
    });

    component.on('onLeave', function () {
        // 饼图生长动画  主要通过per来控制
        var s = 1;
        for(var i=0;i<100;i++){
            setTimeout(function () {
                s-=0.01;
                draw(s);
            },i*10)
        }
    });

    return component;
}

// // 重排项目文本元素
// H5ComponentPie.reSort = function (list) {
//     // 1. 检测相交
//     var compare = function (domA,domB) {
//         //元素的位置不直接用left，因为left的值为auto
//         var offsetA = $(domA).offset();
//         var offsetB = $(domB).offset();
//
//         //domA 的投影
//         var shadowA_x = [offsetA.left,$(domA).width() + offsetA.left];
//         var shadowA_y = [offsetA.top,$(domA).height() + offsetA.top];
//
//         //domB 的投影
//         var shadowB_x = [offsetB.left, $(domB).width() + offsetB.left];
//         var shadowB_y = [offsetB.top, $(domB).height() + offsetB.top];
//
//         var intersect_x = (shadowA_x[0] > shadowB_x[0] && shadowA_x[0] < shadowB_x[1]) ||
//                           (shadowA_x[1] > shadowB_x[0] && shadowA_x[1] < shadowB_x[1]);
//
//         var intersect_y = (shadowA_y[0] > shadowB_y[0] && shadowA_y[0] < shadowB_y[1]) ||
//                           (shadowA_y[1] > shadowB_y[0] && shadowA_y[1] < shadowB_y[1]);
//
//
//         return intersect_x && intersect_y;
//     }
//     // 2. 错开重排
//     var reset = function (domA,domB) {
//         if( $(domA).css('top') != 'auto'){
//             $(domA).css('top',parseInt($(domA).css('top'))+$(domB).height());
//         }
//
//         if( $(domA).css('bottom') != 'auto'){
//             $(domB).css('bottom',parseInt($(domA).css('bottom'))+$(domB).height());
//
//         }
//     }
//     //定义将要重排的元素
//     var willReset = [list[0]];
//     $.each(list, function (i,domTarget) {
//         if(compare(willReset[willReset.length-1], domTarget)){
//             willReset.push(domTarget);  //不会把自身加入到队列
//         }
//         if(list[i+1]){
//             console.log($(domTarget).text(),$(list[i+1]).text(),'相交',compare(domTarget, list[i+1]))
//         }
//         console.log(willReset)
//     })
//
//     if(willReset.length > 1){
//         $.each(willReset,function (i,domA) {
//             if(willReset[i+1]){
//                 reset(domA,willReset[i+1])
//             }
//         })
//         H5ComponentPie.reSort(willReset);
//     }
// }
